<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>地址管理</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/style.css" />
    <style>
        html,
        body {
            /*background: #eee;*/
        }

        .inner_header {
            font-size: 1.6rem;
            color: #000000;
            font-weight: 600;
            height: 6.9rem;
            margin: 0;
            padding: 2.4rem 0 0 0;
            box-sizing: border-box;
            background: none!important;
            box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
            background: #fff!important;
        }

        .content {
            width: 100%;
            float: left;
            margin: 6.9rem 0 0 0;
            padding: 0 1.3rem 0 1.3rem;
        }

        .content_list {
            background: #fff;
            width: 100%;
            float: left;
            box-sizing: border-box;
            box-shadow: 0rem 0rem 0.65rem 0rem rgba(227, 227, 227, 0.59);
            border-radius: 0.7rem;
            box-sizing: border-box;
            padding: 0 1.15rem 0 1.15rem;
            margin-top: 1rem;
        }

        .content_li {
            float: left;
            width: 100%;
            height: 5.7rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #e6e6e6;
            color: #bcbcbc;
            font-size: 1.5rem;
            line-height: 5.7rem;
        }

        .content_li .right {
            float: right;
            display: flex;
            color: #333;
        }

        .content_li .right img {
            margin: 2.1rem 0 0 0.6rem;
            width: 0.7rem;
            height: 1.4rem;
        }

        .content_li .head_img {
            width: 6.7rem;
            height: 6.65rem;
        }

        .only {
            float: left;
            width: 100%;
            height: 9.95rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #e6e6e6;
            color: #333333;
            font-size: 1.5rem;
            line-height: 9.95rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .only .right {
            display: flex;
            align-items: center;
            color: #999!important;
        }

        .only .right img {
            margin: 0 0 0 0.6rem!important;
        }
        /* 修改头像弹出框 */

        .footer {
            width: 100%;
            float: left;
            padding: 0 1.3rem 0 1.3rem;
            position: fixed;
            bottom: 1rem;
        }

        .footer .top {
            background: #fff;
            border-radius: 1rem;
            margin-bottom: 0.5rem;
        }

        .footer .top div {
            width: 100%;
            height: 5rem;
            line-height: 5rem;
            text-align: center;
            color: #333;
            font-size: 1.6rem;
        }

        .footer .top .top_one {
            border-bottom: 0.05rem solid #ddd;
        }

        .footer .bottom {
            background: #fff;
            border-radius: 1rem;
            width: 100%;
            height: 5rem;
            line-height: 5rem;
            text-align: center;
            color: #333;
            font-size: 1.6rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
            <a class="aui-pull-left aui-btn" onclick="goBack()">
                <img src="../../../../image/back.png">
            </a>
            <div class="aui-title">个人信息</div>
        </header>
        <div class="content">
            <div class="content_list">
                <div class="content_li only">
                    <img :src="user_info.head_img" alt="" class="head_img" id="avatar">
                    <div class="right" onclick="showAction()">
                        修改头像
                        <img src="../../../../image/capital/icon4.png" alt="" @click="click_head">
                    </div>
                </div>
                <div class="content_li" onclick="go_url('my_information_nickname','./nickname.html')">
                    昵称
                    <div class="right">
                        {{user_info.username}}
                        <img src="../../../../image/capital/icon4.png" alt="">
                    </div>
                </div>
                <div class="content_li" onclick="go_url('real_choice','../real_name/real_choice.html')">
                    姓名
                    <div class="right">
                        去实名认证
                        <img src="../../../../image/capital/icon4.png" alt="">
                    </div>
                </div>
                <div class="content_li">
                    电话
                    <div class="right">
                        {{user_info.telephone}}
                    </div>
                </div>
                <div class="content_li" onclick="go_url('my_information','./my_information.html')">
                    收货地址
                    <div class="right">
                        <!-- 去认证 -->
                        <img src="../../../../image/capital/icon4.png" alt="">
                    </div>
                </div>
                <div class="content_li" onclick="go_url('qr_code','./qr_code.html')">
                    二维码
                    <div class="right">
                        <!-- 去认证 -->
                        <img src="../../../../image/capital/icon4.png" alt="">
                    </div>
                </div>

            </div>
        </div>
        <!-- <div class="footer" v-if="create">
            <div class="top">
                <div class="top_one">拍照</div>
                <div class="top_two">我的相册</div>
            </div>
            <div class="bottom">取消</div>
        </div> -->
    </div>
</body>
<script type="text/javascript" src="../../../../script/api.js"></script>
<script type="text/javascript" src="../../../../script/axios.min.js"></script>
<script type="text/javascript" src="../../../../script/axios-config.js"></script>
<script type="text/javascript" src="../../../../script/zepto.js"></script>
<script type="text/javascript" src="../../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../../../script/utils.js"></script>
<script type="text/javascript" src="../../../../script/common.js"></script>
<script type="text/javascript" src="../../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {
        new Vue({
            el: "#app",
            data: {
                create: false,
                user_info:""
            },
            mounted:function(){
                var user_info = $api.getStorage('user_info');  //获取用户信息缓存
                this.user_info = user_info
                var that = this
                api.addEventListener({
                    name: 'update_user_info'
                }, function(ret, err) {
                    if(ret.value.info=="updata"){
                        that.user_info=$api.getStorage('user_info',that)
                    }
                });
            },
            methods:{
                click_head: function() {
                    this.create = true
                }
            }
        })

    };



    function showAction() {
        api.actionSheet({
            title: '上传头像',
            cancelTitle: '取消',
            buttons: ['拍照', '从手机相册选择']
        }, function(ret, err) {
            // console.log(ret)
            if (ret) {
                getPicture(ret.buttonIndex);
            }
        });
    }

    function go_url(name, url, get) {
        // console.log(get);
        api.openWin({
            name: name,
            url: url,
            pageParam: {
                data: get
            }
        });
    }

    function goBack() {
        api.sendEvent({
            name: 'update_user_info',
            extra: {
                info:"updata"
            }
        });
        api.closeWin({});
    }

    function getPicture(sourceType) {
        if (sourceType == 1) { // 拍照
            //获取一张图片
            api.getPicture({
                sourceType: 'camera',
                encodingType: 'jpg',
                mediaValue: 'pic',
                allowEdit: false,
                quality: 90,
                saveToPhotoAlbum: true
            }, function(ret, err) {
                // 获取拍照数据并处理
                console.log(JSON.stringify(ret.data))
                if (ret) {
                    var imgSrc = ret.data;
                    var data = {};
                    if (imgSrc != "") {
                        api.ajax({
                            url: 'http://huafu.unohacha.com/Api/'+window.Url.uploadimg,
                            method: 'post',
                            data: {
                                files: {
                                    file:imgSrc
                                }
                            }
                        },function(ret, err){
                            if (ret) {
                                console.log( JSON.stringify( ret ) );
                                if(ret.status==1){
                                    var img_url=ret.info
                                    console.log(img_url)
                                    var data = {}
                                    var data={
                                        token: $api.getStorage('token'),
                                        head_img:img_url
                                    }
                                    Axios.post(window.Url.savememberinfo, data).then(function(res) {
                                        // console.log(JSON.stringify(res))
                                        if(res.status==1){
                                            var ele = $api.dom('#avatar');
                                            $api.attr(ele, 'src',imgSrc);
                                            var user_info = $api.getStorage('user_info');  //获取用户信息缓存
                                            user_info.head_img = imgSrc
                                            $api.setStorage('user_info',user_info)
                                            api.sendEvent({
                                                name: 'update_user_info',
                                                extra: {
                                                    info:"updata"
                                                }
                                            });
                                        }
                                    })
                                }
                            } else {
                                alert( JSON.stringify( err ) );
                            }
                        });
                    }
                }
            });
        } else if (sourceType == 2) { // 从相机中选择
            //UIMediaScanner 是一个多媒体扫描器，可扫描系统的图片、视频等多媒体资源
            var obj = api.require('UIAlbumBrowser');
            obj.open({
                //返回的资源种类,picture（图片）,video（视频）,all（图片和视频）
                type: 'picture',
                //（可选项）图片显示的列数，须大于1
                column: 4,
                max: 1,
                //（可选项）图片排序方式,asc（旧->新）,desc（新->旧）
                sort: {
                    key: 'time',
                    order: 'desc'
                },
                //（可选项）模块各部分的文字内容
                texts: {
                    stateText: '已选择*项',
                    cancelText: '取消',
                    finishText: '完成'
                },
                styles: {
                    bg: '#fff',
                    mark: {
                        icon: '',
                        position: 'bottom_right',
                        size: 20
                    },
                    nav: {
                        bg: '#eee',
                        stateColor: '#000',
                        stateSize: 18,
                        cancleBg: 'rgba(0,0,0,0)',
                        cancelColor: '#000',
                        cancelSize: 18,
                        finishBg: 'rgba(0,0,0,0)',
                        finishColor: '#000',
                        finishSize: 18
                    }
                }
            }, function(ret) {
                // 获取图片数据并处理
                if (ret) {
                        console.log(JSON.stringify(ret.list))
                    if (ret.list.length!=0) {
                        var imgSrc = ret.list[0].thumbPath;
                        var data = {};
                        if (imgSrc != "") {
                            api.ajax({
                                url: 'http://huafu.unohacha.com/Api/'+window.Url.uploadimg,
                                method: 'post',
                                data: {
                                  files: {
                                      file:imgSrc
                                  }
                                }
                            },function(ret, err){
                                if (ret) {
                                    // alert( JSON.stringify( ret ) );
                                    if(ret.status==1){
                                      var img_url=ret.info
                                      console.log(img_url)
                                      var data = {}
                                      var data={
                                          token: $api.getStorage('token'),
                                          head_img:img_url
                                      }
                                      Axios.post(window.Url.savememberinfo, data).then(function(res){
                                          // console.log(JSON.stringify(res))
                                          if(res.status==1){
                                              var ele = $api.dom('#avatar');
                                              $api.attr(ele, 'src',imgSrc);
                                              var user_info = $api.getStorage('user_info');  //获取用户信息缓存
                                              user_info.head_img = imgSrc
                                              $api.setStorage('user_info',user_info)
                                              api.sendEvent({
                                                  name: 'update_user_info',
                                                  extra: {
                                                      info:"updata"
                                                  }
                                              });
                                          }
                                      })
                                    }
                                } else {
                                    alert( JSON.stringify( err ) );
                                }
                            });

                        }
                        // console.log(ret.list[0].thumbPath)
                        var ele = $api.dom('#avatar');
                        $api.attr(ele, 'src', ret.list[0].thumbPath);

                    }
                }
            });
        }
    }
</script>

</html>
